<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ include file="/WEB-INF/jsp/include.jsp"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html id="housewifes">
<c:import url="/WEB-INF/jsp/housewifes/common/head.jsp"/>
<body>
<div id="globalContainer">
    <table border="0" width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <c:import url="/WEB-INF/jsp/housewifes/common/header.jsp"/>
        </tr>
        <tr>
            <td style="height: 600px" id="main_area_block">
                <table class="main_container_table" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <c:import url="/WEB-INF/jsp/housewifes/common/mainLeftMenu.jsp"/>

                        <td class="main_content_cell">
                            <table width="100%"  border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <!-- day menu block -->
                                    <td height="200" valign="top">

                                        <table width="100%" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td height="35" class="gradientV2">
                                                    <div class="block_header_title">
                                                        <c:choose>
                                                            <c:when test="${dayMenu.weekType}">
                                                                <a href="<c:url value="/userstable-get.html"><c:param name="id" value="${usersTable.id}"/></c:url>">
                                                                    <c:out value="${usersTable.name}"/>
                                                                    (период неделя)
                                                                </a>
                                                                ->
                                                                <spring:message code="dayOfWeek.${dayMenu.dayOfWeekByDayNum}"/>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <a href="<c:url value="/userstable-get.html"><c:param name="id" value="${usersTable.id}"/></c:url>">
                                                                    <c:out value="${usersTable.name}"/>
                                                                    (период ${usersTable.periodLength} дней)
                                                                </a>
                                                                ->
                                                                День № ${dayMenu.dayNum}
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </div>
                                                </td>
                                                <td height="35" class="gradientV2" style="text-align:right;">
                                                    <div class="block_header_editbtn_container">
                                                        <a href="http://test.server.ru" class="uiButton">
                                                            <span class="uiButtonText">Редактировать</span>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>

                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                            <tr>
                                                <td>
                                                    <table width="100%" cellpadding="0" cellspacing="0">
                                                        <tr style="height: 30px">
                                                            <td width="20" class="tabCellNoTab">
                                                                &nbsp;
                                                            </td>
                                                            <td width="140" align="center" class="tabCellTabSelected">
                                                                <span class="pageTabMenu selectedTab" onclick="selectTab($(this), 'dayMenuTab')">Дневное меню</span>
                                                            </td>
                                                            <td width="250" align="center" class="tabCellTabNotSelected">
                                                                <span class="pageTabMenu"  onclick="selectTab($(this), 'waresListContainer')">Общий список товаров на день</span>
                                                            </td>
                                                            <td class="tabCellNoTab">
                                                                &nbsp;
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="dayMenuTab" class="pageTab" style="width: 100%; padding-top: 20px">
                                                        <table cellpadding="0" cellspacing="0" border="0" class="daymenu">
                                                            <tr>
                                                                <td>
                                                                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                                        <tr>
                                                                            <td class="title">трапезы</td>
                                                                            <td style="text-align:right;">
                                                                                <div class="block_header_editbtn_container">
                                                                                    <span id="addRecipeBtn" class="uiButton">
                                                                                        <span class="uiButtonText">Добавить</span>
                                                                                    </span>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                                <td class="title">допольнительные товары</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="eatingmenus">
                                                                    <div id="eatingMenusBlock" style="width: 100%; padding: 0">

                                                                    </div>
                                                                </td>
                                                                <td class="dm_wares">
                                                                    <table>
                                                                        <tr>
                                                                            <td class="dm_ware">
                                                                                <span class="name">яйца</span>
                                                                                (
                                                                                <span class="region_price">37.40</span> /
                                                                                <span class="users_price">40.00</span>
                                                                                )
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="dm_ware">
                                                                                <span class="name">фейри</span>
                                                                                (
                                                                                <span class="region_price">98.40</span> /
                                                                                <span class="users_price price_not_set">нет цены</span>
                                                                                )
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="dm_ware">
                                                                                <span class="name">мороженное</span>
                                                                                (
                                                                                <span class="region_price price_not_set">нет цены</span> /
                                                                                <span class="users_price">25.00</span>
                                                                                )
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="dm_ware">
                                                                                <span class="name">кока-кола</span>
                                                                                (
                                                                                <span class="region_price">47.40</span> /
                                                                                <span class="users_price">50.00</span>
                                                                                )
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="dm_ware">
                                                                                <span class="name">шаурма</span>
                                                                                (
                                                                                <span class="region_price">160.00</span> /
                                                                                <span class="users_price">120.00</span>
                                                                                )
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                    <div id="waresListContainer" class="pageTab" style="width: 100%; display: none">
                                                        wares list...
                                                    </div>
                                                    <div id="selectEatingMenusContainer" class="pageTab" style="width: 100%; display: none">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" class="recipe_select_block">
                                                            <tr>
                                                                <td colspan="2" align="center" height="35px">
                                                                    <div class="block_header_title">
                                                                        Выберите рецепт на
                                                                        <select id="eatingTypeSelectId" name="eatingType" style="height: 23px">
                                                                            <option value="BREAKFAST"><spring:message code="eatingmenu.BREAKFAST"/></option>
                                                                            <option value="DINNER"><spring:message code="eatingmenu.DINNER"/></option>
                                                                            <option value="LUNCH"><spring:message code="eatingmenu.LUNCH"/></option>
                                                                            <option value="SUPPER"><spring:message code="eatingmenu.SUPPER"/></option>
                                                                            <option value="OTHER"><spring:message code="eatingmenu.OTHER"/></option>
                                                                        </select>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <div id="selectRecipeDialog">
                                                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                                            <tr>
                                                                                <td class="recipe_groups_block" width="40%">
                                                                                    <div style="width: 100%; height: 710px; border: #000000 solid 0px; overflow: auto; padding-left: 15px">
                                                                                        <div id="recipeGroupsContainer" class="filetree treeview treeview-hw" style="padding-right: 20px"></div>
                                                                                    </div>
                                                                                </td>
                                                                                <td width="60%" valign="top">
                                                                                    <div id="recipesContainer" style="border: red solid 0px"></div>
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>

                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <c:import url="/WEB-INF/jsp/housewifes/common/footer.jsp"/>
                    </tr>
                </table>
            </td>
        </tr>

    </table>
</div>

</body>

<script type="text/javascript">

    function getDayMenuJson0(dayMenuJson) {
        $(dayMenuJson.eatingMenusGroups).each(function() {
            var eatingMenusGroup = this;
            $(eatingMenusGroup.eatingMenus).each(function() {
                var eatingMenu = this;
                $(eatingMenu.eatingMenuRecipes).each(function() {
                    var eatingMenuRecipe = this;
                    eatingMenuRecipe.name = $('<span>' + eatingMenuRecipe.name +'</span>').text();
                    // alert("Name: " + eatingMenuRecipe.name);
                });
            });
        });
        return dayMenuJson;
    }

    function getDayMenuJson() {
        <c:set var="dayMenuJson" value="${dayMenu}" />
        var dayMenuJson = <%@include file="dayMenu-json-data.jsp"%>;
        return getDayMenuJson0(dayMenuJson);
    }


    var dayMenu = getDayMenuJson();

    function selectTab(span, divId) {

        $(".tabCellTabSelected").each(function() {
            $(this).removeClass("tabCellTabSelected");
            $(this).addClass("tabCellTabNotSelected");
        });

        $(".pageTabMenu").removeClass("selectedTab");
        span.addClass("selectedTab");

        span.parent().removeClass("tabCellTabNotSelected");
        span.parent().addClass("tabCellTabSelected");

        $(".pageTab").hide();
        $("#" + divId).show();
    }

    function onNumberInputKeyUp(emReceipeId, event) {
        var origValue = $("#orig_count_holder_" + emReceipeId).text();
        if ($(event.currentTarget).val() != origValue) {
            $("#save_btn_" + emReceipeId).show();
        } else {
            $("#save_btn_" + emReceipeId).hide();
        }
    }

    function drawDayMenuBlock(dayMenu) {
        var eatingMenusBlock = $("#eatingMenusBlock");
        // eatingMenusBlock.innerHTML = '';

        var tableContainer = $('<table cellspacing="0" cellpadding="0" border="0"></table>');

        // eatingMenusBlock.append(tableContainer);

        $(dayMenu.eatingMenusGroups).each(function() {
            var eatingMenusGroup = this;
            var typeBlock = $('<tr><td class="em" colspan="2"><span>' + eatingMenusGroup.type + '</span></td></tr>');
            tableContainer.append(typeBlock);

            $(eatingMenusGroup.eatingMenus).each(function() {
                var eatingMenu = this;
                $(eatingMenu.eatingMenuRecipes).each(function() {
                    var eatingMenuRecipe = this;

                    var nameSpan = $('<span></span>');
                    nameSpan.text(eatingMenuRecipe.name);

                    var saveBtn = $('<div id="save_btn_' + eatingMenuRecipe.id + '" class="save_receipes_count_btn" style="display: none"></div>')
                            .append($('<span class="hidden_id em_receipe_id">' + eatingMenuRecipe.id + '</span>'))
                            .append($('<span class="hidden_id em_id">' + eatingMenu.id + '</span>'))
                            .append($('<span class="save_receipes_count_icon_countainer"><i class="save_receipes_count_icon_img"></i></span>'));

                    tableContainer
                            .append($('<tr id="em_receipe_row_' + eatingMenuRecipe.id + '"></tr>')
                                    .append(
                                            $('<td class="recipe"></td>')
                                                    .append($('<a href="http://test.server.ru"></a>').append(nameSpan)
                                                    )
                                    )
                                    .append($('<td width="80" height="25"></td>')
                                            .append($('<table cellspacing="0" cellpadding="0" border="0"></table>')
                                                    .append($('<tr></tr>')
                                                            .append($('<td width="45"></td>')
                                                                    .append($('<span id="orig_count_holder_' + eatingMenuRecipe.id + '" class="hidden_id">' + eatingMenuRecipe.count + '</span>'))
                                                                    .append($('<input id="curr_count_holder_' + eatingMenuRecipe.id +
                                                                            '"  type="text" value="' + eatingMenuRecipe.count +
                                                                            '" class="receipes_count_inpt onlyNumbers" style="text-align: right" ' +
                                                                            ' onkeyup="onNumberInputKeyUp(' + eatingMenuRecipe.id + ', event)">'))
                                                            )
                                                            .append($('<td></td>')
                                                                    .append(saveBtn)
                                                            )

                                                    )
                                            )
                                    )
                            );



                    saveBtn.hover(
                            function() {
                                $(this).addClass("menu_item_hover");
                            },
                            function(){
                                $(this).removeClass("menu_item_hover");
                            }
                    );
                    saveBtn.click(function() {
                        var emReceipeId = $(this).children(".em_receipe_id").text();
                        var emId = $(this).children(".em_id").text();
                        var currCount = $("#curr_count_holder_" + emReceipeId).val();

                        if (parseInt(currCount) > 0) {
                            updateEatingMenuRecipeCount(
                                    "<c:url value="/eatingmenu-recipes-update-count.html"/>",
                                    emReceipeId,
                                    currCount,
                                    <c:out value="${usersTable.id}"/>,
                                    <c:out value="${dayMenu.dayMenu.id}"/>,
                                    emId,
                                    function() {
                                        //                                 alert("count changed");
                                        $("#save_btn_" + emReceipeId).hide();
                                    }
                            );
                        } else {
                            if (confirm("Вы уверены что хотите удалить рецепт")) {
                                removeRecipeFromEatingMenu(
                                        "<c:url value="/eatingmenu-recipes-remove.html"/>",
                                        emReceipeId,
                                        <c:out value="${usersTable.id}"/>,
                                        <c:out value="${dayMenu.dayMenu.id}"/>,
                                        emId,
                                        function() {
                                            //                                 alert("eating menu removed");
                                            $("#em_receipe_row_" + emReceipeId).remove();
                                        }
                                );
                            }

                        }

                    });
                });
            });
        });

        eatingMenusBlock.html(tableContainer);
    }

    $(document).ready(function() {
        drawDayMenuBlock(dayMenu);

        var selectRecipeDialog = null;

        $("#addRecipeBtn").click(function() {
            $("#dayMenuTab").hide();

            if (selectRecipeDialog == null) {
                selectRecipeDialog = new RecipeSelectCoolDialog(
                        $("#recipeGroupsContainer"),
                        $("#recipesContainer"),
                        {
                            getGroupsUrl: '<c:url value="/get-recipe-groups-json.html"/>',
                            getUserRecipesUrl: '<c:url value="/get-user-recipes-json.html"/>',
                            getCommonRecipesUrl: '<c:url value="/get-common-recipes-json.html"/>'
                        },
                        function (recipe) {
//                            alert('Selected recipe id[' + recipe.id +'] name [' + recipe.name + ']');

                            showLoadingDialog();
                            $.ajax({
                                url: '<c:url value="/daymenu-add-existing-recipe.html"/>',
                                type: 'POST',
                                dataType: 'json',
                                data: {
                                    "recipeId": recipe.id,
                                    "usersTableId": ${usersTable.id},
                                    "dayMenuId": ${dayMenu.dayMenuId},
//                                    "type": 'BREAKFAST'
                                    "type": $("#eatingTypeSelectId").val()
                                },
                                success: function(reply) {
                                    if (reply) {
                                        dayMenu = getDayMenuJson0(reply);
                                        drawDayMenuBlock(dayMenu);
                                        hideLoadingDialog();
                                    } else {
                                        alert("Server error(1)");
                                        window.location.reload(true);
                                    }
                                },
                                error: function(error) {
                                    alert("Server error(2)");
                                    window.location.reload(true);
                                }
                            });
                            $("#selectEatingMenusContainer").hide();
                            $("#dayMenuTab").show();
                        }
                );
                selectRecipeDialog.initContainers();
            }
            $("#selectEatingMenusContainer").show();
        });
    });

</script>

</html>